<template>
  <view class="data-statistics-container">
    <status-bar></status-bar>
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <image src="/static/images/icon/backward_flat.png" class="back-icon-img"></image>
      </view>
      <view class="nav-title">数据统计</view>
    </view>
    
    <!-- 更新提示 -->
    <view class="update-tip">
      <text class="tip-text">注：数据统计更新于每日24:00</text>
    </view>
    
    <!-- 流水统计区域 -->
    <view class="statistics-section">
      <view class="section-header">
        <text class="section-title">流水统计</text>
        <text class="section-subtitle">累计收入: ¥{{ totalIncomeValue }}</text>
        <view class="my-order-btn" @click="goToBill">
          <text>我的账单</text>
        </view>
      </view>
      
      <view class="statistics-grid">
        <view class="stat-row">
          <view class="stat-card">
            <view class="stat-value">¥{{ yesterdayIncomeValue }}</view>
            <view class="stat-label">昨日收入</view>
          </view>
          
          <view class="stat-card">
            <view class="stat-value">¥{{ monthlyExpenseValue }}</view>
            <view class="stat-label">本月支出</view>
          </view>
        </view>
        
        <view class="stat-row">
          <view class="stat-card">
            <view class="stat-value">¥{{ currentMonthIncomeValue }}</view>
            <view class="stat-label">本月收入</view>
          </view>
          
          <view class="stat-card">
            <view class="stat-value">¥{{ lastMonthIncomeValue }}</view>
            <view class="stat-label">上月收入</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 单量统计区域 -->
    <view class="statistics-section">
      <view class="section-header">
        <text class="section-title">单量统计</text>
        <text class="section-subtitle">累计完单量: {{ totalOrderCountValue }}</text>
      </view>
      
      <view class="statistics-grid">
        <view class="stat-row">
          <view class="stat-card">
            <view class="stat-value">{{ yesterdayOrderValue }}</view>
            <view class="stat-label">昨日完成单量</view>
          </view>
          
          <view class="stat-card">
            <view class="stat-value">{{ monthlyOrderValue }}</view>
            <view class="stat-label">本月完成单量</view>
          </view>
        </view>
        
        <view class="stat-row">
          <view class="stat-card">
            <view class="stat-value">{{ lastMonthOrderValue }}</view>
            <view class="stat-label">上月完成单量</view>
          </view>
          
          <view class="stat-card empty-card"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { flowingStatistics, allInCome } from '@/api/app/master/transactionlog.js'

export default {
  data() {
    return {
      // 使用单独的变量而不是嵌套对象，以确保响应式更新
      totalIncomeValue: '0.00',
      yesterdayIncomeValue: '0.00',
      monthlyExpenseValue: '0.00',
      currentMonthIncomeValue: '0.00',
      lastMonthIncomeValue: '0.00',
      totalOrderCountValue: 0,
      yesterdayOrderValue: 0,
      monthlyOrderValue: 0,
      lastMonthOrderValue: 0
    }
  },
  created() {
    // 在created生命周期中初始化数据
    this.initData();
  },
  onShow() {
    // 每次页面显示时刷新数据
    this.initData();
  },
  methods: {
    // 初始化数据
    initData() {
      this.getFlowingStatistics();
      this.getAllIncome();
    },
    
    // 获取流水统计数据
    getFlowingStatistics() {
      flowingStatistics().then(res => {
        if (res.code === 200 && res.data) {
          const data = res.data;
          
          // 直接更新各个值
          this.yesterdayIncomeValue = data.yesterdayIncome || '0.00';
          this.monthlyExpenseValue = data.monthlyExpense || '0.00';
          this.currentMonthIncomeValue = data.currentMonthIncome || '0.00';
          this.lastMonthIncomeValue = data.lastMonthIncome || '0.00';
          this.yesterdayOrderValue = data.yesterdayOrder || 0;
          this.monthlyOrderValue = data.monthlyOrder || 0;
          this.lastMonthOrderValue = data.lastMonthOrder || 0;
          
          // 如果接口返回了总订单数，也更新它
          if (data.totalOrderCount !== undefined) {
            this.totalOrderCountValue = data.totalOrderCount;
          }
        }
      }).catch(err => {
        console.error('获取流水统计数据失败', err);
        uni.showToast({
          title: '获取统计数据失败',
          icon: 'none'
        });
      });
    },
    
    // 获取总收入
    getAllIncome() {
      allInCome().then(res => {
        if (res.code === 200 && res.data !== undefined && res.data !== null) {
          // 格式化总收入
          const income = res.data;
          this.totalIncomeValue = typeof income === 'number' ? 
            income.toFixed(2) : String(income);
          
          console.log('设置总收入为:', this.totalIncomeValue);
        }
      }).catch(err => {
        console.error('获取总收入数据失败', err);
        uni.showToast({
          title: '获取总收入数据失败',
          icon: 'none'
        });
      });
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 跳转到账单页面
    goToBill() {
      uni.navigateTo({
        url: '/pages/mine/bill'
      });
    },
    
    // 跳转到订单列表
    goToOrderList() {
      uni.navigateTo({
        url: '/pages/order/order-list'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.data-statistics-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #4c9bfb;
  color: #fff;
  padding: 0 30rpx;
  position: relative;
}

.back-btn {
  position: absolute;
  left: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon-img {
  width: 40rpx;
  height: 40rpx;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
}

/* 更新提示 */
.update-tip {
  background-color: #fff9e6;
  padding: 20rpx 30rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #ff9900;
}

/* 统计区域通用样式 */
.statistics-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 30rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  position: relative;
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-right: 20rpx;
}

.section-subtitle {
  font-size: 28rpx;
  color: #666;
}

.my-order-btn {
  position: absolute;
  right: 0;
  font-size: 28rpx;
  color: #4c9bfb;
}

/* 统计网格 */
.statistics-grid {
  padding: 0;
}

/* 统计行 */
.stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

/* 卡片样式 */
.stat-card {
  width: 48%;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8rpx;
  text-align: center;
  padding: 30rpx 0;
}

.empty-card {
  border: none;
}

.stat-value {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
}
</style>